<template>
  <div>
    <MyDialog :list="list">
      <template #look="{res}">
        <button @click="flagchange(res)">编辑</button>
        <button @click="del(res.id)">删除</button>
      </template>
    </MyDialog>
    <duihua :flag.sync="flag" height="25%" title="编辑菜单" width="25%">
      <template #duihua>
        <form action>
          姓名：
          <input type="text" v-model="FormData.name" />
          <br />年龄：
          <input type="text" v-model="FormData.age" />
        </form>
        <div>
          <button @click="xiao">取消</button>
          <button @click="gai">确认</button>
        </div>
      </template>
    </duihua>
  </div>
</template>

<script>
import MyDialog from './table/Mytable.vue'
import duihua from './dui/duihua.vue';
export default {
  data () {
    return {
      list: [
        {
          id: 1,
          name: '周小亮',
          age: 19
        },
        {
          id: 2,
          name: '赵小云',
          age: 15
        },
        {
          id: 3,
          name: '龚小狗',
          age: 16
        },
        {
          id: 4,
          name: '何小勾',
          age: 11
        }
      ],
      flag: false,
      FormData: {
        name: '',
        age: ''
      }
    }
  },
  components: {
    MyDialog,
    duihua
  },
  methods: {
    del (id) {
      console.log(id);
      this.list = this.list.filter(ele => ele.id != id)
    },
    flagchange (res) {
      this.flag = true
      this.FormData = res
      this.FormData = JSON.parse(JSON.stringify(res))
    },
    xiao () {
      this.flag = false
    },
    gai(){
      
      const obj = this.list.find(ele=>ele.id===this.FormData.id)
      obj.name = this.FormData.name
      obj.age = this.FormData.age
      this.flag = false
    }
  }
}
</script>

<style>
</style>